<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/addBook.css}">
</head>
<body>
<div class="container">
    <h1 class="title">测试增加书(提交)</h1>
    <form action="/addBook" method="post" enctype="multipart/form-data">
        <label for="book_name">BookName:</label>
        <input type="text" id="book_name" name="book_name" required />

        <label for="author">Author:</label>
        <input type="text" id="author" name="author" required />

        <label for="book_cover_input">BookCover:</label>
        <input
                type="file"
                name="book_cover_input"
                id="book_cover_input"
                accept="image/*"
                onchange="loadImage(event)"
                required
        />
        <img id="book_cover_preview" class="book-cover-preview" />
        <label for="book_detail">BookDetail:</label>
        <input type="text" id="book_detail" name="book_detail" required />

        <label for="book_price">BookPrice:</label>
        <input type="text" id="book_price" name="book_price" required />

        <label for="book_text">BookText:</label>
        <input type="text" id="book_text" name="book_text" required />

        <input type="submit" value="添加" />
    </form>
    <a href="/findAllBooks">回去看看</a>
</div>

<script>
    // 加载图像文件并预览它
    function loadImage(event) {
        var input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var preview = document.getElementById("book_cover_preview");
                preview.src = e.target.result;

                var base64str = e.target.result.split(",")[1];
                var bookCoverInput = document.getElementById("book_cover");
                bookCoverInput.value = base64str;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
</body>
</html>